<template>
  <div class="detail_box">
    <div class="line">
      <span class="lab"><i class="mark_icon">*</i>appKey：</span>
      <div>
        <el-input type="text" placeholder="请输入appKey" v-model.trim="appKey" @input="setTip('','')"></el-input>
      </div>
    </div>
    <div class="line">
      <span class="lab"><i class="mark_icon">*</i>appSecret：</span>
      <div>
        <el-input type="text" placeholder="请输入appSecret" v-model.trim="appSecret" @input="setTip('','')"></el-input>
      </div>
    </div>
    <div class="line">
      <span class="lab"><i class="mark_icon">*</i>模板ID：</span>
      <div>
        <el-input type="text" placeholder="请输入模板ID" v-model.trim="templateId" @input="setTip('','')"></el-input>
      </div>
    </div>
    <div class="line">
      <span class="lab"><i class="mark_icon">*</i>时间间隔：</span>
      <div>
        <el-input type="text" placeholder="请输入时间间隔" v-model.trim="time" @input="setTip('','')"></el-input>
      </div>
    </div>

    <div class="line">
      <span class="lab"><i class="mark_icon">*</i>语音链接：</span>
      <div>
        <el-input type="text" placeholder="请输入语音链接" v-model.trim="link" @input="setTip('','')"></el-input>
      </div>
    </div>
    <div class="line">
      <span class="lab"><i class="mark_icon">*</i>手机号码：</span>
      <div>
        <el-input type="text" placeholder="请输入手机号" v-model.trim="phone" @input="setTip('','')"></el-input>
      </div>
    </div>
    <div class="line">
      <span class="lab"><i class="mark_icon">*</i>是否可用：</span>
      <div>
        <el-radio-group v-model="enable">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </div>
    </div>
    <p class="text_tip">{{ infoTip }}</p>
    <span class="confirm_btn" @click="confirmEdit">确定</span>
  </div>
</template>

<script>

import {addFireConfig, getFireConfig, updateFireConfig} from "../../../api/config";

export default {
  data() {
    return {
      loading: false,
      appKey: '',
      templateId: '',
      time: '',
      phone: '',
      appSecret: '',
      link: '',
      enable: 1,
      paramId: '',
      tipNum: '',
      infoTip: ''
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    // 获取列表信息
    getInfo() {
      let that = this;
      that.loading = true;
      let queryParams = {
        limit: 10,
        page: 1,
        type: 2,
      }
      getFireConfig(queryParams).then(res => {
        if (res.success) {
          if (res.data.list.length > 0) {
            let data = res.data.list[0];
            let e = JSON.parse(data.content);
            that.appSecret = e.appSecret;
            that.templateId = e.templateId;
            that.time = e.time;
            that.link = e.url;
            that.phone = e.phone;
            that.appKey = e.appKey;
            that.enable = data.enable;
            that.paramId = data.id;
          }
        }
        that.loading = false;
      }, (err) => {
        that.loading = false;
      });
    },

    confirmEdit() {
      if (this.appKey === '') {
        this.setTip(0, '请输入appKey！')
      } else if (this.appSecret === '') {
        this.setTip(1, '请输入appSecret！');
      } else if (this.templateId === '') {
        this.setTip(2, '请输入模板ID！');
      } else if (this.time === '') {
        this.setTip(3, '请输入时间间隔！');
      } else if (this.link === '') {
        this.setTip(4, '请输入语音链接！');
      } else if (this.phone === '') {
        this.setTip(5, '请输入手机号！');
      } else {
        this.sendInfo();
      }
    },

    sendInfo() {
      let that = this;
      that.loading = true;
      let content = {
        appSecret: that.appSecret,
        templateId: that.templateId,
        time: that.time,
        url: that.link,
        phone: that.phone,
        appKey: that.appKey,
      }
      let data = {
        content: JSON.stringify(content),
        type: 2,
        enable: that.enable
      }
      if (that.paramId) {
        data.id = that.paramId;
        updateFireConfig(JSON.stringify(data)).then(response => {
          that.setResult(response.success);
        }).catch((e) => {
          that.loading = false;
        });
      } else {
        addFireConfig(JSON.stringify(data)).then(response => {
          that.setResult(response.success);
        }).catch((e) => {
          that.loading = false;
        });
      }
    },

    setResult(finish) {
      if (finish) {
        this.closePopup(true);
        this.$message.success('操作成功！');
      }
      this.loading = false;
    },

    setTip(num, text) {
      this.tipNum = num;
      this.infoTip = text;
    },

  }
}
</script>

<style scoped>
.confirm_btn {
  display: block;
  margin: 50px 0 0 136px;
  width: 330px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  background: #427EF1;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}

.confirm_btn:hover {
  background: #5299f1;
}

.text_tip {
  padding-left: 50px;
  color: #427EF1;
  font-size: 14px;
  margin-bottom: 30px;
}
</style>
